import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { useNavigate } from 'react-router-dom';
import { Badge, Tag } from 'antd';
import { API_BASEURL } from '@/constants/api';
import { resUserSales } from '@/services/user';
import { TagsOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { formatUrl } from '@/utils/format';

const UserSales: FC<PropsWithChildren<{ data: API.UserSales }>> = ({
  data,
}) => {
  const navigate = useNavigate();
  return (
    <Badge.Ribbon
      text={<span className={'text-xs'}>{data.total}</span>}
      color={'#2db7f5'}
    >
      <div
        onClick={() => {
          navigate(`/user_page/${data.id}`);
        }}
        className={
          'bg-blue-50  flex items-center  cursor-pointer rounded-l-full '
        }
      >
        <div className={'w-9 h-9 min-w-fit'}>
          <img
            className={'rounded-xl object-contain w-full h-full'}
            src={API_BASEURL + '/' + data.avatar}
            alt="avatar"
          />
        </div>
        <div className={'ml-1 truncate'}>{data.name}</div>
      </div>
    </Badge.Ribbon>
  );
};

const HomeHotUser: FC<PropsWithChildren<{}>> = () => {
  const { data, loading } = useRequest(resUserSales);
  return (
    <div
      className={
        'rounded-lg font-serif overflew-hidden bg-gray-50 px-4 py-6 h-full overflow-hidden'
      }
    >
      <div className={'text-lg text-center text-gray-900 mb-3'}>热门卖家</div>
      <div className={'space-y-2'}>
        {data && data.length > 0
          ? data
              .sort((a, b) => {
                return  b.total - a.total;
              })
              .map((value) => {
                return <UserSales key={value.id} data={value} />;
              })
          : null}
      </div>
    </div>
  );
};

export default memo(HomeHotUser);
